<template>
  <view class="index-charts">
    <!-- 柱状图统计图 -->
    <view class="index-card">
      <view class="index-card-title">
        2022年某某统计图
      </view>
      <view class="index-card-sub-title">
        2022/01/01 ~ 2022/09/09
      </view>
      <view class="index-card-body">
        <canvas style="height: 250px;" canvas-id="chart1" id="chart1" class="index-charts" />
      </view>
    </view>
    <!-- 面积统计图 -->
    <view class="index-card">
      <view class="index-card-title">
        2022年某某统计图
      </view>
      <view class="index-card-sub-title">
        2022/01/01 ~ 2022/09/09
      </view>
      <view class="index-card-body">
        <canvas style="height: 250px;" canvas-id="chart2" id="chart2" class="index-charts" />
      </view>
    </view>
    <!-- 雷达图 -->
    <view class="index-card">
      <view class="index-card-title">
        2022年某某统计图
      </view>
      <view class="index-card-sub-title">
        2022/01/01 ~ 2022/09/09
      </view>
      <view class="index-card-body">
        <canvas style="height: 320px;" canvas-id="chart3" id="chart3" class="index-charts" />
      </view>
    </view>
    <!-- 漏斗图 -->
    <view class="index-card">
      <view class="index-card-title">
        2022年漏斗图统计图
      </view>
      <view class="index-card-sub-title">
        2022/01/01 ~ 2022/09/09
      </view>
      <view class="index-card-body">
        <canvas style="height: 320px;" canvas-id="chart4" id="chart4" class="index-charts" />
      </view>
    </view>
    <!-- 折线图 -->
    <view class="index-card">
      <view class="index-card-title">
        2022年折线图统计图
      </view>
      <view class="index-card-sub-title">
        2022/01/01 ~ 2022/09/09
      </view>
      <view class="index-card-body">
        <canvas style="height: 250px;" canvas-id="chart5" id="chart5" class="index-charts" />
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * @description 用户权限内菜单
   * @date 2022-03-12
   * @version v1.0.1
   * @author gf
   */
  import uCharts from '@/components/thirdparty/u-charts/u-charts.js';
  let charts = {
    chart1: null,
    chart2: null,
    chart3: null,
    chart4: null,
    chart5: null,
    chart6: null
  }
  import {
    mapState
  } from 'vuex'
  export default {
    name: 'index-charts',
    data() {
      return {
        chartCommonGrid:this.$config.ucharts.chartCommonGrid,
        yAxisCommonStyle:this.$config.ucharts.yAxisCommonStyle,
        cWidth: 375,
        cHeight: 250,
        msgNums: {},
        menuList: []
      }
    },
    computed: {
      ...mapState(['token'])
    },
    mounted() {
      this.chart1Init()
      this.chart2Init()
      this.chart3Init()
      this.chart4Init()
      this.chart5Init()
      this.chart6Init()
    },
    watch: {
      token(newVal) {
        this.getMenus()
      }
    },
    methods: {
      //柱状图1初始化
      chart1Init() {
        let chartData = {
          "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
          "series": [{
            "name": "成交量1",
            "data": [15, {
              "value": 20,
              "color": "#f04864"
            }, 45, 37, 43, 34]
          }, {
            "name": "成交量2",
            "data": [30, {
              "value": 40,
              "color": "#facc14"
            }, 25, 14, 34, 18]
          }]
        }
        charts.chart1 = new uCharts({
          $this: this,
          canvasId: 'chart1',
          type: 'column',
          legend: this.legendStyle,
          fontSize: 11,
          background: '#FFFFFF',
          pixelRatio: 1,
          animation: true,
          categories: chartData.categories,
          series: chartData.series,
          xAxis: this.chartCommonGrid,
          yAxis: {
            ...this.chartCommonGrid,
            data: [this.yAxisCommonStyle]
          },
          dataLabel: true,
          width: this.cWidth,
          height: this.cHeight,
          extra: {
            column: {
              type: 'group',
              width: 15
            }
          }
        });
      },
      //折线区域图2初始化
      chart2Init() {
        let chartData = {
          categories: ['2012', '2013', '2014', '2015', '2016', '2017', '2018'],
          series: [{
            name: '成交量A',
            data: [100, 80, 95, 150, 112, 132, 139],
            color: '#facc14'
          }, {
            name: '成交量B',
            data: [70, 40, 65, 100, 44, 68, 72],
            color: '#2fc25b'
          }, {
            name: '成交量C',
            data: [35, 20, 25, 37, 4, 20, 15],
            color: '#1890ff'
          }]
        }
        charts.chart2 = new uCharts({
          $this: this,
          canvasId: 'chart2',
          type: 'area',
          fontSize: 11,
          legend: this.legendStyle,
          dataLabel: false,
          dataPointShape: true,
          background: '#FFFFFF',
          pixelRatio: 1,
          categories: chartData.categories,
          series: chartData.series,
          animation: true,
          xAxis: {
            ...this.chartCommonGrid,
            boundaryGap: 'justify'
          },
          yAxis: {
            ...this.chartCommonGrid,
            data: [this.yAxisCommonStyle]
          },
          width: this.cWidth,
          height: this.cHeight,
          extra: {
            area: {
              type: 'curve', //curve曲线，straight直线
              opacity: 0.05,
              addLine: true,
              width: 0.5
            }
          }
        });
      },
      //仪表盘chart3 初始化
      chart3Init() {
        let chartData = {
          categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
          series: [{
            name: '成交量1',
            data: [90, 110, 165, 195, 187, 172]
          }, {
            name: '成交量2',
            data: [190, 210, 105, 35, 27, 102]
          }]
        }
        charts.chart3 = new uCharts({
          $this: this,
          canvasId: 'chart3',
          type: 'radar',
          fontSize: 11,
          legend: this.legendStyle,
          background: '#FFFFFF',
          pixelRatio: 1,
          animation: true,
          dataLabel: true,
          categories: chartData.categories,
          series: chartData.series,
          width: this.cWidth,
          height: 320,
          extra: {
            radar: {
              max: 200, //雷达数值的最大值
              gridColor: '#eee',
              gridCount: 5
            }
          }
        });
      },
      //漏斗图chart4初始化
      chart4Init() {
        let chartData = {
          "series": [{
            "name": "部门1",
            "data": 50
          }, {
            "name": "部门2",
            "data": 30
          }, {
            "name": "部门3",
            "data": 20
          }, {
            "name": "部门4",
            "data": 18
          }, {
            "name": "部门5",
            "data": 8
          }]
        }
        charts.chart4 = new uCharts({
          $this: this,
          canvasId: 'chart4',
          type: 'funnel',
          fontSize: 11,
          padding: [15, 15, 0, 15],
          legend: this.legendStyle,
          background: '#FFFFFF',
          pixelRatio: 1,
          series: chartData.series,
          animation: true,
          width: this.cWidth,
          height: 320,
          dataLabel: true,
          extra: {
            funnel: {
              border: true,
              borderWidth: 2,
              borderColor: '#FFFFFF'
            }
          },
        });
      },
      //折线图chart5初始化
      chart5Init() {
        let chartData = {
          categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
          series: [{
            name: '成交量A',
            data: [35, 20, 25, 37, 4, 20]
          }, {
            name: '成交量B',
            data: [70, 40, 65, 100, 44, 68]
          }, {
            name: '成交量C',
            data: [100, 80, 95, 150, 112, 132]
          }]
        }
        charts.chart5 = new uCharts({
          $this: this,
          canvasId: 'chart5',
          type: 'line',
          fontSize: 11,
          legend: this.legendStyle,
          dataLabel: false,
          dataPointShape: true,
          background: '#FFFFFF',
          pixelRatio: 1,
          categories: chartData.categories,
          series: chartData.series,
          animation: true,
          xAxis: {
            ...this.chartCommonGrid,
            boundaryGap: 'justify'
          },
          yAxis: {
            ...this.chartCommonGrid,
            data: [this.yAxisCommonStyle]
          },
          width: this.cWidth,
          height: this.cHeight,
          extra: {
            line: {
              type: 'curve', //curve曲线，straight直线
              opacity: 0.05,
              addLine: true,
              width: 1
            }
          }
        });
      },
      //仪表盘chart6初始化
      chart6Init() {
        let chartData = {
          categories: [{
            value: 0.2,
            color: '#1890ff'
          }, {
            value: 0.8,
            color: '#2fc25b'
          }, {
            value: 1,
            color: '#f04864'
          }],
          series: [{
            name: '完成率',
            data: 0.85
          }]
        }
        charts.chart6 = new uCharts({
          $this: this,
          canvasId: 'chart6',
          type: 'gauge',
          fontSize: 11,
          legend: false,
          title: {
            name: Math.round(chartData.series[0].data * 100) + '%',
            color: chartData.categories[1].color,
            fontSize: 30,
            offsetY: 90,
          },
          subtitle: {
            name: chartData.series[0].name,
            color: '#777',
            fontSize: 14,
            offsetY: -50,
          },
          extra: {
            gauge: {
              type: 'default',
              width: 18, //仪表盘背景的宽度
              startAngle: 0.75,
              endAngle: 0.25,
              startNumber: 0,
              endNumber: 100,
              splitLine: {
                fixRadius: 0,
                splitNumber: 10,
                width: 10, //仪表盘背景的宽度
                color: '#FFFFFF',
                childNumber: 5,
                childWidth: 6, //刻度长度
              },
              pointer: {
                width: 8, //指针宽度
                color: 'auto'
              }
            }
          },
          background: '#FFFFFF',
          pixelRatio: 1,
          categories: chartData.categories,
          series: chartData.series,
          animation: true,
          width: this.cWidth,
          height: this.cHeight,
          dataLabel: true,
        });
      },

    }
  }
</script>

<style lang="scss">
  .index-card{
    background-color: #fff;
    margin-bottom: 30upx;
    padding-top: 30upx;
    &-title{
      font-size: 32upx;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
    &-sub-title{
      font-size: 22upx;
      color: #999;
      text-align: center;
      font-weight: 300;
      margin-bottom: 20upx;
    }
    &-showmore{
      height: 90upx;
      justify-content: center;
      align-items: center;
      // color: $uni-color-primary;
      color: #aaa;
      font-size: 26upx;
      display: flex;
      text{
        margin-left: 5upx;
      }
      &:active{
        background-color: #fafafa;
        color: $uni-color-primary;
      }
    }
  }
  .index-charts{
    width: 100vw;
  }
</style>
